import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import { Modal, Form, Radio, Input } from 'antd'
import ContentBox from 'components/contentBox'
import CustomTable from 'components/common/table'
// import Style from './category.css'

const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 16 }
}
class categoryForm extends Component {
  static propTypes = {
  }
  constructor (props) {
    super(props)
    this.state = {
      pageNo: 1,
      pageSize: 20
    }
    this.onPageChange = this.onPageChange.bind(this)
    this.onShowSizeChange = this.onShowSizeChange.bind(this)
    this.handleAdd = this.handleAdd.bind(this)
  }

  getTableCols () {
    return [
      {
        title: '编号',
        dataIndex: 'id',
        key: 'id',
        width: 100,
        sorter: (a, b) => a.id - b.id
      },
      {
        title: '商品分类名称',
        dataIndex: 'name',
        key: 'name',
        width: 100
      },
      {
        title: '级别',
        dataIndex: 'level',
        key: 'level',
        width: 100
      },
      {
        title: '商品数量',
        dataIndex: 'count',
        key: 'count',
        width: 100,
        sorter: (a, b) => a.count - b.count
      }
      // {
      //   title: '单位',
      //   dataIndex: 'updateTime',
      //   key: 'updateTime',
      //   width: 100
      // },
      // {
      //   title: '设置',
      //   dataIndex: 'setting',
      //   key: 'setting',
      //   render: (text, record) => {
      //     return <>
      //       <a className={Style['a-btn']} onClick={() => this.handleRestore(record.id)}>新增下级</a>
      //       <a className={Style['a-btn']} onClick={() => this.handleRestore(record.id)}>查看下级</a>
      //       <a className={Style['a-btn']} onClick={() => this.handleRestore(record.id)}>转移商品</a>
      //     </>
      //   },
      //   width: 150
      // },
      // {
      //   title: '操作',
      //   dataIndex: 'operate',
      //   key: 'operate',
      //   render: (text, record) => {
      //     return <>
      //       <a className={Style['a-btn']} onClick={() => this.handleRestore(record.id)}>编辑</a>
      //       <Popconfirm placement='top' title='确认是否删除' onConfirm={() => this.restoreReply(record.id)}>
      //         <a className={Style['a-btn']}>删除</a>
      //       </Popconfirm>
      //     </>
      //   },
      //   width: 100
      // }
    ]
  }

  onPageChange (pageNo, pageSize) {
    this.setState({
      pageNo
    })
  }

  onShowSizeChange (current, pageSize) {
    this.setState({
      pageSize
    })
    const { params } = this.state
    params.pageNo = current
    params.pageSize = pageSize
  }

  handleAdd () {
    this.setState({
      showAdd: true
    })
  }

  componentDidMount () {
    const { pageNo, pageSize } = this.state
    this.props.getCategoryList({
      pageNo, pageSize, parentId: 1
    })
  }

  render () {
    const { categoryData } = this.props
    const { getFieldDecorator } = this.props.form
    const { pageSize, pageNo, showAdd } = this.state
    const pagination = {
      showSizeChanger: true,
      current: pageNo,
      total: categoryData && categoryData.total,
      onChange: this.onPageChange,
      pageSize
    }
    return (
      <>
        <ContentBox>
          <div>
            {/* <div className={Style['btn-container']}>
              <Button type='primary' onClick={this.handleAdd}>新建分类</Button>
            </div> */}
            <CustomTable loading={false} columns={this.getTableCols()} dataSource={(categoryData && categoryData.list) || []} pagination={pagination} />
            <Modal
              title='新增分类'
              visible={showAdd}
              width={600}
              onOk={this.handleOk}
              destroyOnClose
              onCancel={this.handleCancel}
            >
              <Form {...formItemLayout}>
                <Form.Item label='商品分类名称'>
                  {getFieldDecorator('tagName')(
                    <Input placeholder='请输入' />
                  )}
                </Form.Item>

                <Form.Item label='是否显示'>
                  {getFieldDecorator('tagName')(
                    <Radio.Group>
                      <Radio value={1}>是</Radio>
                      <Radio value={2}>否</Radio>
                    </Radio.Group>)}
                </Form.Item>
                <Form.Item label='是否显示在导航栏'>
                  {getFieldDecorator('tagName')(
                    <Radio.Group>
                      <Radio value={1}>是</Radio>
                      <Radio value={2}>否</Radio>
                    </Radio.Group>)}
                </Form.Item>
              </Form>
            </Modal>
          </div>
        </ContentBox>
      </>
    )
  }
}

const mapState = state => ({
  categoryData: state.goods.categoryData
})
const mapDispatch = dispatch => ({
  getCategoryList: dispatch.goods.getCategoryList
})

const category = Form.create()(categoryForm)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(category)
)
